import {
  Spinner,
  Table,
  TableBody,
  TableCell,
  TableColumn,
  TableHeader,
  TableRow,
  Selection
} from '@nextui-org/react'
import { MobileTableProps } from '../MoblieTable'

export type NextTableProps = {
  selectedKeys: Selection
  setSelectedKeys: (keys: Selection) => void
} & MobileTableProps

const NextTable = ({
  columns,
  items,
  renderCell,
  selectedKeys,
  setSelectedKeys
}: NextTableProps) => {
  return (
    <Table
      aria-label="Example table with custom cells, pagination and sorting"
      isHeaderSticky
      selectedKeys={selectedKeys}
      selectionMode="multiple"
      onSelectionChange={setSelectedKeys}
    >
      <TableHeader columns={columns}>
        {column => (
          <TableColumn
            allowsSorting={false}
            key={column?.uid}
            align={column?.uid === 'actions' ? 'center' : 'start'}
          >
            {column?.name}
          </TableColumn>
        )}
      </TableHeader>
      <TableBody
        emptyContent={'No users found'}
        items={items}
        isLoading={false}
        loadingContent={<Spinner label="Loading..." />}
      >
        {item => (
          <TableRow key={item.id}>
            {columnKey => (
              <TableCell align={columnKey === 'actions' ? 'center' : 'left'}>
                {renderCell
                  ? renderCell?.(item, columnKey as string)
                  : item?.[columnKey]}
              </TableCell>
            )}
          </TableRow>
        )}
      </TableBody>
    </Table>
  )
}

export default NextTable
